<template>
  <div>
    <div :id="option.id"></div>
  </div>
</template>
<script>
  import { columnChartsConfig } from '@/api/chartsConfig'
  export default {
    name: 'scCharts',
    props: ['chartsData', 'option'],
    // data() {
    //   return { }
    // },
    methods: {
      draw() {
        let data = this.chartsData
        const chart = new this.$G2({
          container: this.option.id,
          autoFit: true,
          height: 500,
          padding: [10, 20, 30, 40],
        })
        // const chart = new this.$G2.Chart({
        //   container: ,
        //   forceFit: true,
        //   height: 500,
        //   padding: [10, 20, 30, 40],
        // })
        chart.data(data)
        chart.tooltip({
          showMarkers: false,
          formatter: val => {
            return val.name + 'jjjj'
          },
        })
        chart.scale('count', {
          tickInterval: 20,
          nice: true,
        })
        if (this.option.type == 'rank') {
          chart.coordinate().transpose()
        }
        if (this.option.countUnit) {
          chart.axis('count', {
            label: {
              formatter: val => {
                return val + this.option.countUnit
              },
            },
          })
        }
        if (this.option.nameUnit) {
          chart.axis('name', {
            label: {
              formatter: val => {
                return val + this.option.nameUnit
              },
            },
          })
        }
        chart
          .interval()
          .position('name*count')
          .color(columnChartsConfig.columnColor) // 改变柱状图的颜色
        chart.render()
      },
    },
    mounted() {
      this.draw()
    },
  }
</script>
